<script lang="ts" setup>
import { useUserStore } from "@/stores/user";
import { useRoute } from "vue-router";
import type { WhManagerBsTbEqpCheckStatisticUsingGet } from "@/genapi/wh";
import { whManagerBsTbEqpCheckStatisticUsingGet } from "@/genapi/wh";

defineOptions({ name: "PageContent" });
export interface PageContentProps {
	headerClass?: any;
	contentClass?: any;
	footerClass?: any;
}

export interface PageContentEmits {
	(event: "update:modelValue", data?: unknown): void;
}
const router = useRoute();
const props = defineProps<PageContentProps>();
const emit = defineEmits<PageContentEmits>();
const userStore = useUserStore();

const options: WhManagerBsTbEqpCheckStatisticUsingGet.Options = {}; // 可选的选项，例如查询参数或其他配置
const countData = ref();
whManagerBsTbEqpCheckStatisticUsingGet(options)
	.then((response: WhManagerBsTbEqpCheckStatisticUsingGet.Result) => {
		// 处理成功的响应数据
		countData.value = response.data;
	})
	.catch((error: any) => {
		// 处理错误情况
		console.error("Error fetching data:", error);
	});
</script>

<template>
	<div
		class="statisticPanel"
		h-25
		mt-4
		ml-5
		rounded-md
		flex
		justify-between
		pt-2.5
		px-9
		v-if="
			userStore.userType === '2' &&
			router.meta.title === '装置开停车和大检修管理'
		"
	>
		<div class="unitCount bg-gradient-to-r from-[#F2F9FE] to-[#E6F4FE]">
			<span>项目总数</span>
			<div class="unitCountNum">
				<img src="../../../public/编组 4 7.png" />
				<span pl-3>{{ countData?.totalNum ? countData?.totalNum : "--" }}</span>
			</div>
		</div>
		<div class="unitCount">
			<span>实施中项目</span>
			<div class="unitCountNum">
				<img src="../../../public/编组-47/green.png" />
				<span pl-3>{{ countData?.doingNum ? countData?.doingNum : "--" }}</span>
			</div>
		</div>
		<div class="unitCount">
			<span>完工项目</span>
			<div class="unitCountNum">
				<img src="../../../public/编组-47/purple.png" />
				<span pl-3>{{
					countData?.completeNum ? countData?.completeNum : "--"
				}}</span>
			</div>
		</div>
		<div class="unitCount">
			<span>预警数量</span>
			<div class="unitCountNum">
				<img src="../../../public/编组-47/pink.png" />
				<span pl-3>{{
					countData?.waringNum ? countData?.waringNum : "--"
				}}</span>
			</div>
		</div>
	</div>

	<div
		class="page-content"
		bg="#fff"
		rd="4px"
		flex="~ 1 col"
		p="20px"
		m="20px"
		of="hidden"
	>
		<div
			v-show="$slots.header"
			class="of-hidden flex-shrink-0 pb-20px"
			:class="headerClass"
		>
			<slot name="header" />
		</div>
		<div class="flex flex-col flex-1 of-hidden" :class="contentClass">
			<slot />
		</div>
		<div
			v-show="$slots.footer"
			class="flex flex-justify-end flex-shrink-0 of-hidden pt-20px"
			:class="footerClass"
		>
			<slot name="footer" />
		</div>
	</div>
</template>
<style scoped lang="scss">
.statisticPanel {
	background-color: #fff;
	margin: 20px 20px 0px 20px;
	height: 120px;
	display: flex;
	justify-content: space-around;
	align-items: center;

	.unitCount {
		width: 22%;
		height: 80%;
		background-position: 90% 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 10px 15px;
		.unitCountNum {
			display: flex;
			font-size: 22px;
			img {
				margin-right: 5px;
			}
		}
		&:nth-child(1) {
			background-color: #e6f4fe;
			background-image: url(../../../public/blue.png);
			background-repeat: no-repeat;
		}
		&:nth-child(2) {
			background-color: #e6feee;
			background-image: url(../../../public/green.png);
			background-repeat: no-repeat;
		}
		&:nth-child(3) {
			background-color: #ececff;
			background-image: url(../../../public/purple.png);
			background-repeat: no-repeat;
		}
		&:nth-child(4) {
			background-color: #ffe4e4;
			background-image: url(../../../public/pink.png);
			background-repeat: no-repeat;
		}
	}
}
</style>
